<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>let and const</title>
    <script src="./vue.global.js"></script>
    <style>
        .demo {
            font-family: sans-serif;
            border: 1px solid #eee;
            border-radius: 2px;
            padding: 20px 30px;
            margin-top: 1em;
            margin-bottom: 40px;
            user-select: none;
            overflow-x: auto;
        }
    </style>
</head>
<body>
<!--    <div id="hello-vue" class="demo">-->
<!--        {{ message }}-->
<!--    </div>-->
    <div id="list-rendering" class="demo">
        <ol>
            <li v-for="todo in todos">
                {{ todo.text }}
            </li>
        </ol>
    </div>
<!--    <div id="two-way-binding" class="demo">-->
<!--        <p>{{ message }}</p>-->
<!--        <input v-model="message"/>-->
<!--    </div>-->
<!--<div id="conditional-rendering" class="demo">-->
<!--    <span v-if="seen">现在你看到我了</span>-->
<!--</div>-->
<!--    <div id="event-handling">-->
<!--        <p>{{message}}</p>-->
<!--        <button v-on:click="reverseMessage">反转 Message</button>-->
<!--    </div>-->
<!--    <div id="counter" class="demo">-->
<!--        Counter: {{ counter }}-->
<!--    </div>-->
<!--    <div id="bind-attribute" class="demo">-->
<!--        <span v-bind:title="message">-->
<!--            鼠标悬停几秒钟查看此处动态绑定的提示信息！-->
<!--        </span>-->
<!--    </div>-->


    <script>
        const HelloVueApp = {
            data() {
                return {
                    message:"Hello Vue!"
                }
            }
        };
        const Counter = {
            data() {
                return {
                    counter: 1
                }
            },
            mounted(){
                setInterval(() => {
                    this.counter++
                },1000)
            }
        };
        const AttributeBinding = {
          data() {
              return {
                  message:'You loaded this page on '+ new Date().toLocaleDateString()
              }
          }
        };
        const EventHandling ={
            data() {
                return {
                    message:'Hello Vue.js'
                }
            },
            methods:{
                reverseMessage() {
                    this.message = this.message.split('').reverse().join('')
                }
            }
        };
        const TwoWayBinding = {
            data() {
                return {
                    message:"Hello Vue.js!"
                }
            },

        };
        const ConditionalRendering ={
            data() {
                return {
                    seen:true
                }
            }
        };
        const ListRendering = {
            data(){
                return {
                    todos:[
                        {text:'Learn JavaScript'},
                        {text:'Learn Vue'},
                        {text:'Build something awesome'},
                    ]
                }
            }
        };
        // Vue.createApp(ListRendering).mount('#list-rendering');
        // Vue.createApp(HelloVueApp).mount('#hello-vue');
        // Vue.createApp(TwoWayBinding).mount('#two-way-binding');
        // Vue.createApp(ConditionalRendering).mount('#conditional-rendering');
        // Vue.createApp(EventHandling).mount('#event-handling');
        // Vue.createApp(Counter).mount('#counter');
        // Vue.createApp(AttributeBinding).mount('#bind-attribute');


    </script>
</body>
</html>